<!--
 * @Description: 开发企业使用率榜单
 * @Author: py
 * @Date: 2024-11-04
-->
<script setup lang='ts'>
import { useUsageBoard } from '@fl/api/data-analysis'

import type { DateRange } from '../types'

const oDateRange = inject<Ref<DateRange>>('dateRange')
if (!oDateRange) {
    throw new Error('dateRange is not provided by an ancestor component.')
}

const { data: tableData, isLoading } = useUsageBoard(oDateRange)
const isTableLoading = ref(isLoading)

</script>

<template>
    <div>
        <h5 class="module-title">
            开发企业使用率榜单
        </h5>

        <el-table v-loading="isTableLoading"
                  :data="tableData"
                  class="w-full"
                  stripe
                  max-height="460"
        >
            <el-table-column type="index"
                             label="排名"
                             width="55"
            />

            <el-table-column prop="projectName"
                             label="企业名称"
                             show-overflow-tooltip
                             width="130"
            />

            <el-table-column prop="propertyCount"
                             label="在线顾问数"
            />

            <el-table-column prop="operateRate"
                             label="使用率"
            />
        </el-table>
    </div>
</template>

<style lang="less" scoped>
@import '../panel.less';
</style>
